import cx from "classNames";
import "./index.less";
import { CSSProperties, ReactNode } from "react";

type ButtonProps = {
  icon?: string;
  active?: boolean;
  onClick?: (e: any) => void;
  children?: ReactNode;
  style?:CSSProperties;
  className?:string;
  size?:'large' | 'middle' | 'small'
};
export default (props: ButtonProps) => {
  const { icon, active,isPreventDefault=true, onClick, children,size='small',...reset } = props;
  const _onMouseDown=(e)=>{
    if(isPreventDefault){
      e.preventDefault();
    }
 
  
    onClick?.(e)
  }
  return (
    <div
      {...reset}
      onMouseDown={_onMouseDown}
      className={cx("editor-button", active ? "active" : "",reset?.className)}
  >
      {icon ? <img className="editor-icon" src={icon} /> : null}
      {children}
    </div>
  );
};
